<template>
  <h4>LazyTree</h4>
  <el-tree
      style="max-width: 600px"
      :props="props"
      :load="loadNode"
      lazy
      show-checkbox
  />
</template>

<script lang="ts" setup>
import type {LoadFunction} from 'element-plus'

interface Tree {
  name: string
  leaf?: boolean
}

const props = {
  label: 'name',
  children: 'zones',
  isLeaf: 'leaf',
}

const loadNode: LoadFunction = (node, resolve) => {
  console.log(node.level, 99999);
  console.log(node.label, 5555);
  if (node.level === 0) {
    return resolve([{name: 'root'}])
  }
  /*终止展开条件*/
  if (node.level > 5) return resolve([])

  setTimeout(() => {
    var levelString = node.level + '-cat';
    var levelString2 = node.level + '-pig';
    const data: Tree[] = [
      {
        name: levelString,
        leaf: false,
      },
      {
        name: levelString2,
        leaf: false,
      },
    ]
    resolve(data)
  }, 50)
}

</script>
